<template>
  <x-table
    ref="refTable"
    name="角色"
    :top="40"
    :columns="columns"
    :highlight-current-row="true"
    :init-sort="{ roleName: 'ascending' }"
    :data="tableData.resp.list"
    :total="tableData.resp.total"
    :loading="tableData.loading"
    @query="handleQuery"
    @row-click="handleRowClick"
  >
    <template #column-roleStatus="scope">
      <el-tag v-if="scope.data === 0" type="info">禁用</el-tag>
      <template v-else>启用</template>
    </template>
  </x-table>
</template>

<script setup lang="ts">
import { ElTag } from 'element-plus'
import { useRole } from '@/views/system/role/hook'
import type { Role } from '@/api/modules/system/role'

const emits = defineEmits(['select'])

const { refTable, tableData, handleQuery, filters, handleFormatter } = useRole()

const columns = [
  { prop: 'roleName', label: '角色名称', width: 280, isGbk: true },
  { prop: 'roleType', label: '类型', formatter: handleFormatter, filters: filters.roleType, width: 150 },
  { prop: 'roleStatus', label: '状态', formatter: handleFormatter, filters: filters.roleType }
]

const handleRowClick = (role: Role) => {
  emits('select', role)
}
</script>

<style lang="scss" scoped></style>
